extends /templates/base-flat

block content
  div(data-spy="scroll", data-target="#nav-container")
    .container-fluid#jumbotron
      .container
        .row
          //TODO: Size these correctly
          .col-xs-10
            h1(data-i18n="about.main_title")
        .row
          .col-xs-8
            h2(data-i18n="about.main_description")

    #nav-container
      nav#fixed-nav.nav.navbar
        .container-fluid.text-center
          ul.center-block
            li.active
              a(href="#mission")#mission-link
                small.label(data-i18n="about.mission_link")
            li
              a(href="#team")#team-link
                small.label(data-i18n="about.team_link")
            if me.showOpenResourceLink()
              li
                a(href="#community")#community-link
                  small.label(data-i18n="nav.community")
            li
              a(href="#story")#story-link
                small.label(data-i18n="about.story_link")
            li
              a(href="#careers")#careers-link
                small.label(data-i18n="nav.careers")
            li
              a(href="#contact")#contact-link
                small.label(data-i18n="about.press_link")

    #about-container.container
      #mission.anchor.row
        .col-sm-6#mission-graphic.responsive-side-margins
          img(src="/images/pages/about/globe_white.png")
          h2(data-i18n="about.mission_title")
          #mission-graphic-filler
        .col-sm-5.col-sm-offset-1
          #mission-text.responsive-side-margins
            p(data-i18n="[html]about.mission_description_1")
            p(data-i18n="[html]about.mission_description_2")

      #team.anchor
        .text-center
          h3(data-i18n="about.team_title")
          h4.responsive-side-margins(data-i18n="about.team_values")
        ul
          // Full time
          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/brehan-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/brehan-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Brehan Maul
              small(data-i18n="about.ceo")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/chelsea-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/chelsea-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Chelsea Johnson
              small(data-i18n="about.coo")
              br

          li
            .profile-pic
              a(href="http://bryukh.com" rel="external")
                img(src="/images/pages/about/team-avatars/bryukh-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/bryukh-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name
                a(href="http://bryukh.com" rel="external") Valentin Briukhanov
              small(data-i18n="about.game_director")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/claire-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/claire-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Claire Armstrong
              small
                span(data-i18n="about.som_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/shan-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/shan-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Shan Liu
              small(data-i18n="about.shan_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/run-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/run-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Run Chen
              small(data-i18n="about.run_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/yuqiang-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/yuqiang-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Yuqiang Tong
              small(data-i18n="about.yuqiang_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/zhiran-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/zhiran-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Zhiran Chen
              small(data-i18n="about.zhiran_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/steven-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/steven-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Steven Adkins
              small(data-i18n="about.sae_title")
              br

          li
            .profile-pic
              a(href="https://www.linkedin.com/in/saurabh-patel/" rel="external" target="_blank")
                img(src="/images/pages/about/team-avatars/Saurabh-avatar.jpg").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/saurabh-headshot.jpeg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Saurabh Patel
              small(data-i18n="about.eng_team_lead")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/gabrielle-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/gabrielle-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Gabrielle Vanhoesen
              small(data-i18n="about.scsm_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/tom-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/tom-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Tom Zarosinski
              small(data-i18n="about.ae_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/noah-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/noah-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Noah Williams
              small(data-i18n="about.csm_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/angelica-avatar.jpg").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/angelica-headshot.jpg").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Angelica Telnik
              small(data-i18n="about.mm_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/Sonia-avatar.jpg").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/sonia-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Sonia Spindt
              small(data-i18n="about.scd_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/lizd-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/lizd-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Liz Derman
              small(data-i18n="about.sae_title")
              br

        ul
          li
            a(href="http://retrostylegames.com/" rel="external")
              img(src="/images/pages/about/pavel_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://retrostylegames.com/" rel="external") Pavel Konstantinov
              small(data-i18n="about.retrostyle_title")
              small(data-i18n="about.retrostyle_blurb")

          li
            a(href="http://retrostylegames.com/" rel="external")
              img(src="/images/pages/about/oleg_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://retrostylegames.com/" rel="external") Oleg Ulyanickiy
              small(data-i18n="about.retrostyle_title")
              small(data-i18n="about.retrostyle_blurb")

      if me.showOpenResourceLink()
        #community.anchor
          #community-row-1.row.text-center
            .col-sm-12
            .text-center
              h3(data-i18n="about.community_title")
              h4(data-i18n="about.community_subtitle")
              img(src="/images/pages/about/github_avatars.png")#community-avatars

          #community-row-2.row
            .col-sm-5
              p.responsive-side-margins
                span.spr(data-i18n="about.community_description_3")
                a(href="/community")
                  span(data-i18n="about.community_description_link_2")
                span ,
                span.spr(data-i18n="about.community_description_1")
                a(href="/contribute")
                  span(data-i18n="about.community_description_link")
                span.spl(data-i18n="about.community_description_2")
            .col-sm-6.col-sm-offset-1#community-graphic.responsive-side-margins
              h2(data-i18n="about.number_contributors")
              img(src="/images/pages/about/github.png")
              #community-graphic-filler

      #story.anchor
        .text-center
          h3(data-i18n="about.story_title")
          h4.responsive-side-margins(data-i18n="about.story_subtitle")
        .row
          #story-graphic-1.col-lg-6
            .media
              .pull-left
                img.media-object#story-image-1(src="/images/pages/about/character_silouhette.png")
              .media-body
                .media-heading.text-h1
                  span(data-i18n="about.story_statistic_1a")
                  br
                  span(data-i18n="about.story_statistic_1b")
                p.text-h5(data-i18n="about.story_statistic_1c")

          .col-lg-5.col-lg-offset-1
            #story-graphic-2
              .media
                p.text-h5(data-i18n="about.story_statistic_2a")
                .pull-right
                  img(src="/images/pages/about/globe_green.png")
                .media-body
                  .media-heading.text-h1(data-i18n="about.story_statistic_2b")

        #story-graphic-3.text-center
          p
            div.text-h5(data-i18n="about.story_statistic_3a")
            #story-bracketed-text
              div#left-bracket
                img(src="/images/pages/about/bracket_left.png")
              div.text-h1(data-i18n="about.story_statistic_3b")
              div#right-bracket
                img(src="/images/pages/about/bracket_right.png")
          #story-languages
            .text-center
              .text-h5(data-i18n="about.story_statistic_3c")
            #language-icons.text-center(title="JavaScript, Python, HTML, CSS, jQuery, Bootstrap")
              img.hidden-xs(src="/images/pages/about/new_languages.png")
              img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/new_languages_xs.png")

        #story-graphic-4.text-center
          p
            div.text-h5(data-i18n="about.story_long_way_1")
            figure
              img(src="/images/pages/about/sketch.png")
              figcaption
                small(data-i18n="about.story_sketch_caption")
          p
            .text-h5(data-i18n="about.story_long_way_2")

      #careers.anchor
        if view.jobs && view.jobs.length
          .text-center
            h3(data-i18n="about.jobs_title")
            //- h4(data-i18n="about.jobs_subtitle")
          #careers-row.row
            .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
              #benefits
                h5(data-i18n="about.jobs_benefits")
                ul
                  li.small
                    a.benefits-link(href='http://blog.triplebyte.com/fixing-the-inequity-of-startup-equity', data-i18n="about.jobs_benefit_9")
                  li.small(data-i18n="about.jobs_benefit_6")
                  li.small(data-i18n="about.jobs_benefit_11")
                  li.small(data-i18n="about.jobs_benefit_4")
                  li.small(data-i18n="about.jobs_benefit_5")
                  li.small(data-i18n="about.jobs_benefit_12")
                  li.small(data-i18n="about.jobs_benefit_14")

            for job in view.jobs
              - var location = job.categories ? job.categories.location : ''
              - var commitment = job.categories ? job.categories.commitment : ''
              .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
                .job-listing
                  h5= job.text.replace(/ \(Remote\)$/i, '')
                    .text-center
                      small.label
                        span= location || 'Remote'
                        if commitment
                          span  • #{commitment}
                    .job-description
                      for paragraph in (job.descriptionPlain || '').split('\n\n')
                        p.small= paragraph
                    a.job-link.btn.btn-lg.btn-navy(href=`https://jobs.lever.co/codecombat/${job.id}?lever-origin=applied&lever-source%5B%5D=CodeCombat` rel="external" target="_blank")
                      span(data-i18n="about.learn_more")

      #contact.anchor
        .text-center
          h3(data-i18n="about.contact_title")
          h4(data-i18n="about.contact_subtitle")
          if me.showChinaResourceInfo()
            - var {COCO_CHINA_CONST} = require('core/constants')
            p.
              商务合作：#{COCO_CHINA_CONST.CONTACT_EMAIL} #[br]
              业务咨询：#{COCO_CHINA_CONST.CONTACT_PHONE}
          else
            a(href="mailto:team@codecombat.com") team@codecombat.com

      #files
        .row
          .col-md-6.col-lg-8
            #screenshots
              span.label(data-i18n="about.screenshots_title")
              .hidden-sm.hidden-md.hidden-lg
                small(data-i18n="about.screenshots_hint")
              #screenshot-grid
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='0')
                  img(src="/images/pages/about/screenshot_desert.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='1')
                  img(src="/images/pages/about/screenshot_forest.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='2')
                  img(src="/images/pages/about/screenshot_dungeon.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='3')
                  img(src="/images/pages/about/screenshot_glacier.png")
              .clearfix.hidden-xs
                small(data-i18n="about.screenshots_hint")
          .col-md-6.col-lg-4
            #downloads-container
              #downloads
                .label(data-i18n="about.downloads_title")
                ul
                  li
                    a.small(href="https://files.codecombat.com/presspack/AboutCodeCombat.pdf")
                      span(data-i18n="about.about_codecombat")
                      | (.pdf)
                  li
                    a.small(href="https://files.codecombat.com/presspack/CodeCombat-Logo.ai")
                      span(data-i18n="about.logo")
                      | (.ai)
                  li
                    a.small(href="https://files.codecombat.com/presspack/CodeCombat-Logo.png")
                      span(data-i18n="about.logo")
                      | (.png)
                  li
                    a.small(href="https://files.codecombat.com/presspack/GameImages.zip")
                      span(data-i18n="about.screenshots")
                      | (.zip)
                  li
                    a.small(href="https://files.codecombat.com/presspack/gameimages/CodeCombat_Splash.png")
                      span(data-i18n="about.character_art")
                      | (.png)
                .text-center
                  a.btn.btn-lg.btn-primary-alt#download-button(href="https://files.codecombat.com/presspack/CodeCombat_PressPack.zip")
                    span.glyphicon.glyphicon-download-alt
                    span(data-i18n="about.download_all")

      #screenshot-lightbox.modal.fade(data-show="false")
        .modal-dialog
          .modal-content
            #screenshot-carousel.carousel
              ol.carousel-indicators
                li(data-target=".screenshot-display", data-slide-to="0").active
                li(data-target=".screenshot-display", data-slide-to="1")
                li(data-target=".screenshot-display", data-slide-to="2")
                li(data-target=".screenshot-display", data-slide-to="3")

              .carousel-inner
                .item.active
                  img#screenshot-desert(src="/images/pages/about/desert.png")
                .item
                  img#screenshot-forest(src="/images/pages/about/forest.png")
                .item
                  img#screenshot-dungeon(src="/images/pages/about/dungeon.png")
                .item
                  img#screenshot-glacier(src="/images/pages/about/glacier.png")
              a#carousel-left.left.carousel-control(href="#screenshot-carousel", role="button")
                span.glyphicon.glyphicons-chevron-left.glyphicon-chevron-left(aria-hidden="true")
                span.sr-only(data-i18n="about.previous")
              a#carousel-right.right.carousel-control(href="#screenshot-carousel", role="button")
                span.glyphicon.glyphicons-chevron-right.glyphicon-chevron-right(aria-hidden="true")
                span.sr-only(data-i18n="play.next")

      #location
        .row
          .col-sm-4.col-sm-offset-2
            p
              b CodeCombat Inc.
            p 2261 Market Street #4388
            p San Francisco, California 94114
            a(href="mailto:team@codecombat.com") team@codecombat.com
          .col-sm-4
            p
              b(data-i18n="about.location_title")
            iframe(width="370", height="280", frameBorder="2", src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAIGQz3OMbv5YWivScUM86-zESjEgJR2Xo&q=2261+Market+St+%234388,+San+Francisco,+CA+94114")
        if me.get('preferredLanguage') == 'nl-NL' || me.get('preferredLanguage') == 'nl-BE'
          .row
            .col-sm-4.col-sm-offset-2
              p
                b Nederlands Partnerkantoor
              p Bargelaan 26, Leiden (derde verdieping)
              a(href="mailto:jurian@codecombat.nl") jurian@codecombat.nl
            .col-sm-4
              iframe(width="370", height="280", frameBorder="2", src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2447.19364739596!2d4.479821952024331!3d52.16717256996879!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5c6e906d80437%3A0xc124b9b4fd813139!2sBargelaan+26%2C+2333+CT+Leiden%2C+Netherlands!5e0!3m2!1sen!2sus!4v1496848944226")
